<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue'
import { roleStore } from '@/stores/role'
import { baseToolsStore } from '@/stores/baseTools'
import { headersStore } from '@/stores/apiHeader'
import MyHumanLeft from '@/components/PermissionsModule/Human/Group/MyHumanLeft.vue'
import MyModuleAllLeft from '@/components/PermissionsModule/Human/Group/MyModuleAllLeft.vue'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
const store = roleStore() as any
const isDepartment = computed(() => baseToolsStore().isDepartment) //是否是部门
const { humanLevel } = store
// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = humanLevel // 初始化面板权限
// 深度监听 store.panelPermissions
watch(
  () => store.humanLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
//获取当前月份
const month = computed(() => {
  return headersStore().month
})
// 是否为集团总部
const isHeadquarters = computed(() => {
  return headersStore().scope_code === '0000100001'
})
const groupBoxRef = ref(null)
const showMore2 = ref(
  newRole.value == 2 &&
    headersStore().scope_code !== '0000100001' &&
    !baseToolsStore().isDepartment
    ? true
    : false
)

let timer = null
// 开始计时
const startTimer = () => {
  if (showMore2.value == true && groupBoxRef?.value) {
    timer = setInterval(() => {
      groupBoxRef?.value?.hidden('l-box')
    }, 30000)
  }
}
// 重置计时
const resetTimer = () => {
  clearTimeout(timer)
  if (!dialogInfo.visible) {
    startTimer()
  }
}
// 监听用户操作事件，重置计时
window.addEventListener('mousemove', resetTimer)
window.addEventListener('keydown', resetTimer)
window.addEventListener('click', resetTimer)
onMounted(() => {
  startTimer()
})
</script>

<template>
  <GroupBox
    pName="l-box"
    transition="left"
    :title="$t('bi_humanresources_pofws')"
    :showMore="false"
  >
    <template #title> {{ $t('bi_humanresources_pofws') }}</template>
    <template #first>
      <MyHumanLeft />
    </template>
    <template #second>
      <MyHumanLeft :showRemainingComponents="true" />
    </template>
  </GroupBox>
  <GroupBox
    pName="l-box"
    transition="left"
    :showMore2="showMore2"
    :title="$t('bi_humanresources_lcp')"
    ref="groupBoxRef"
  >
    <template #title> {{ $t('bi_humanresources_lcp') }} </template>
    <template #first>
      <MyModuleAllLeft />
    </template>
    <template #second>
      <MyModuleAllLeft :showRemainingComponents="true" />
    </template>
  </GroupBox>
</template>
<style lang="scss" scoped>
.carousel {
  width: 100%;

  :deep(.el-carousel__container) {
    height: 297px;
  }
}
</style>
